<template>
    <div>
        <header>
            <h1>数据可视化-ECharts 虚拟数据</h1>
            <div class="showTime">当前时间：2020年8月<span></span></div>
        </header>
        <section class="mainbox">
            <div class="column">
                <div class="panel bar">
                    <h2>
                        柱状图-各行业程序员数量 <a href="javascript:;">2019</a>
                        <a href="javacript:;"> 2020</a>
                    </h2>
                    <div class="chart"></div>
                    <div class="panel-footer"></div>
                </div>
                <div class="panel line">
                    <h2>折线图-学习变化</h2>
                    <div class="chart"></div>
                    <div class="panel-footer"></div>
                </div>
                <div class="panel pie">
                    <h2>饼形图-工程师年龄分布</h2>
                    <div class="chart"></div>
                    <div class="panel-footer"></div>
                </div>
            </div>
            <div class="column">
                <div class="no">
                    <div class="no-hd">
                        <ul>
                            <li>125811</li>
                            <li>104563</li>
                        </ul>
                    </div>
                    <div class="no-bd">
                        <ul>
                            <li>程序员需求人数</li>
                            <li>程序员供应人数</li>
                        </ul>
                    </div>
                </div>
                <div class="map">
                    <div class="chart"></div>
                    <div class="map1"></div>
                    <div class="map2"></div>
                    <div class="map3"></div>
                </div>
            </div>
            <div class="column">
                <div class="panel bar1">
                    <h2>柱状图-开发技能</h2>
                    <div class="chart"></div>
                    <div class="panel-footer"></div>
                </div>
                <div class="panel line1">
                    <h2>折线图-公司人员流动</h2>
                    <div class="chart"></div>
                    <div class="panel-footer"></div>
                </div>
                <div class="panel pie1">
                    <h2>饼形图-各地区程序员占比</h2>
                    <div class="chart"></div>
                    <div class="panel-footer"></div>
                </div>
            </div>
        </section>

    </div>
</template>

<script>
// 引入基本模板
import echarts from 'echarts/lib/echarts'
export default {
    data() {
        return {

        }
    },
    mounted() {
        this.init();
        this.init2();
        this.init3();
        this.init4();
        this.init5();
        this.init6();
    },
    methods: {
        init() {
            // 柱状图1模块
            const myChart = echarts.init(document.querySelector(".bar .chart"));
            // 指定配置和数据
            const option = {
                color: ["#2f89cf"],
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        // 坐标轴指示器，坐标轴触发有效
                        type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
                    }
                },
                grid: {
                    left: "0%",
                    top: "10px",
                    right: "0%",
                    bottom: "4%",
                    containLabel: true
                },
                xAxis: [
                    {
                        type: "category",
                        data: [
                            "旅游行业",
                            "教育培训",
                            "游戏行业",
                            "医疗行业",
                            "电商行业",
                            "社交行业",
                            "金融行业"
                        ],
                        axisTick: {
                            alignWithLabel: true
                        },
                        axisLabel: {
                            textStyle: {
                                color: "rgba(255,255,255,.6)",
                                fontSize: "12"
                            }
                        },
                        axisLine: {
                            show: false
                        }
                    }
                ],
                yAxis: [
                    {
                        type: "value",
                        axisLabel: {
                            textStyle: {
                                color: "rgba(255,255,255,.6)",
                                fontSize: "12"
                            }
                        },
                        axisLine: {
                            lineStyle: {
                                color: "rgba(255,255,255,.1)"
                                // width: 1,
                                // type: "solid"
                            }
                        },
                        splitLine: {
                            lineStyle: {
                                color: "rgba(255,255,255,.1)"
                            }
                        }
                    }
                ],
                series: [
                    {
                        name: "直接访问",
                        type: "bar",
                        barWidth: "35%",
                        data: [200, 300, 300, 900, 1500, 1200, 600],
                        itemStyle: {
                            barBorderRadius: 5
                        }
                    }
                ]
            };

            // 把配置给实例对象
            myChart.setOption(option);
            window.addEventListener("resize", function () {
                myChart.resize();
            });
            // 数据变化
            var dataAll = [
                { year: "2019", data: [200, 300, 300, 900, 1500, 1200, 600] },
                { year: "2020", data: [300, 400, 350, 800, 1800, 1400, 700] }
            ];

            document.querySelector(".bar h2").addEventListener("click", function (e) {
                var i = e.target == this.children[0] ? 0 : 1;
                option.series[0].data = dataAll[i].data;
                myChart.setOption(option);
            });
        },
        init2() {
            // 折线图定制
            // 基于准备好的dom，初始化echarts实例
            var myChart2 = echarts.init(document.querySelector(".line .chart"));

            // (1)准备数据
            var data = {
                year: [
                    [24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120],
                    [40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79]
                ]
            };

            // 2. 指定配置和数据
            const option2 = {
                color: ["#00f2f1", "#ed3f35"],
                tooltip: {
                    // 通过坐标轴来触发
                    trigger: "axis"
                },
                legend: {
                    // 距离容器10%
                    right: "10%",
                    // 修饰图例文字的颜色
                    textStyle: {
                        color: "#4c9bfd"
                    }
                    // 如果series 里面设置了name，此时图例组件的data可以省略
                    // data: ["邮件营销", "联盟广告"]
                },
                grid: {
                    top: "20%",
                    left: "3%",
                    right: "4%",
                    bottom: "3%",
                    show: true,
                    borderColor: "#012f4a",
                    containLabel: true
                },

                xAxis: {
                    type: "category",
                    boundaryGap: false,
                    data: [
                        "1月",
                        "2月",
                        "3月",
                        "4月",
                        "5月",
                        "6月",
                        "7月",
                        "8月",
                        "9月",
                        "10月",
                        "11月",
                        "12月"
                    ],
                    // 去除刻度
                    axisTick: {
                        show: false
                    },
                    // 修饰刻度标签的颜色
                    axisLabel: {
                        color: "rgba(255,255,255,.7)"
                    },
                    // 去除x坐标轴的颜色
                    axisLine: {
                        show: false
                    }
                },
                yAxis: {
                    type: "value",
                    // 去除刻度
                    axisTick: {
                        show: false
                    },
                    // 修饰刻度标签的颜色
                    axisLabel: {
                        color: "rgba(255,255,255,.7)"
                    },
                    // 修改y轴分割线的颜色
                    splitLine: {
                        lineStyle: {
                            color: "#012f4a"
                        }
                    }
                },
                series: [
                    {
                        name: "新增项目",
                        type: "line",
                        stack: "总量",
                        // 是否让线条圆滑显示
                        smooth: true,
                        data: data.year[0]
                    },
                    {
                        name: "新增技能",
                        type: "line",
                        stack: "总量",
                        smooth: true,
                        data: data.year[1]
                    }
                ]
            };
            // 3. 把配置和数据给实例对象
            myChart2.setOption(option2);

            // 重新把配置好的新数据给实例对象
            myChart2.setOption(option2);
            window.addEventListener("resize", function () {
                myChart2.resize();
            });
        },
        init3() {
            // 基于准备好的dom，初始化echarts实例
            var myChart3 = echarts.init(document.querySelector(".pie .chart"));

            const option3 = {
                tooltip: {
                    trigger: "item",
                    formatter: "{a} <br/>{b}: {c} ({d}%)",
                    position: function (p) {
                        //其中p为当前鼠标的位置
                        return [p[0] + 10, p[1] - 10];
                    }
                },
                legend: {
                    top: "90%",
                    itemWidth: 10,
                    itemHeight: 10,
                    data: ["0岁以下", "20-29岁", "30-39岁", "40-49岁", "50岁以上"],
                    textStyle: {
                        color: "rgba(255,255,255,.5)",
                        fontSize: "12"
                    }
                },
                series: [
                    {
                        name: "年龄分布",
                        type: "pie",
                        center: ["50%", "42%"],
                        radius: ["40%", "60%"],
                        color: [
                            "#065aab",
                            "#066eab",
                            "#0682ab",
                            "#0696ab",
                            "#06a0ab",
                            "#06b4ab",
                            "#06c8ab",
                            "#06dcab",
                            "#06f0ab"
                        ],
                        label: { show: false },
                        labelLine: { show: false },
                        data: [
                            { value: 1, name: "0岁以下" },
                            { value: 4, name: "20-29岁" },
                            { value: 2, name: "30-39岁" },
                            { value: 2, name: "40-49岁" },
                            { value: 1, name: "50岁以上" }
                        ]
                    }
                ]
            };

            // 使用刚指定的配置项和数据显示图表。
            myChart3.setOption(option3);
            window.addEventListener("resize", function () {
                myChart3.resize();
            });
        },
        init4() {
            // 学习进度柱状图模块
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.querySelector(".bar1 .chart"));

            var data = [90, 80, 75, 65, 65];
            var titlename = ["javascript", "VUE", "jQuery", "HTML5", "CSS3"];
            var valdata = ["精通", "熟练", "熟练", "掌握", "掌握"];
            var myColor = ["#1089E7", "#F57474", "#56D0E3", "#F8B448", "#8B78F6"];
            var option4 = {
                //图标位置
                grid: {
                    top: "10%",
                    left: "22%",
                    bottom: "10%"
                },
                xAxis: {
                    show: false
                },
                yAxis: [
                    {
                        show: true,
                        data: titlename,
                        inverse: true,
                        axisLine: {
                            show: false
                        },
                        splitLine: {
                            show: false
                        },
                        axisTick: {
                            show: false
                        },
                        axisLabel: {
                            color: "#fff",

                            rich: {
                                lg: {
                                    backgroundColor: "#339911",
                                    color: "#fff",
                                    borderRadius: 15,
                                    // padding: 5,
                                    align: "center",
                                    width: 15,
                                    height: 15
                                }
                            }
                        }
                    },
                    {
                        show: true,
                        inverse: true,
                        data: valdata,
                        axisLabel: {
                            textStyle: {
                                fontSize: 12,
                                color: "#fff"
                            }
                        }
                    }
                ],
                series: [
                    {
                        name: "条",
                        type: "bar",
                        yAxisIndex: 0,
                        data: data,
                        barCategoryGap: 50,
                        barWidth: 10,
                        itemStyle: {
                            normal: {
                                barBorderRadius: 20,
                                color: function (params) {
                                    var num = myColor.length;
                                    return myColor[params.dataIndex % num];
                                }
                            }
                        },
                        label: {
                            normal: {
                                show: true,
                                position: "inside",
                                formatter: "{c}%"
                            }
                        }
                    },
                    {
                        name: "框",
                        type: "bar",
                        yAxisIndex: 1,
                        barCategoryGap: 50,
                        data: [100, 100, 100, 100, 100],
                        barWidth: 15,
                        itemStyle: {
                            normal: {
                                color: "none",
                                borderColor: "#00c1de",
                                borderWidth: 3,
                                barBorderRadius: 15
                            }
                        }
                    }
                ]
            };

            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option4);
            window.addEventListener("resize", function () {
                myChart.resize();
            });
        },
        init5() {
            // 折线图 优秀作品
            var myChart = echarts.init(document.querySelector(".line1 .chart"));

            var option5 = {
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        lineStyle: {
                            color: "#dddc6b"
                        }
                    }
                },
                legend: {
                    top: "0%",
                    textStyle: {
                        color: "rgba(255,255,255,.5)",
                        fontSize: "12"
                    }
                },
                grid: {
                    left: "10",
                    top: "30",
                    right: "10",
                    bottom: "10",
                    containLabel: true
                },

                xAxis: [
                    {
                        type: "category",
                        boundaryGap: false,
                        axisLabel: {
                            textStyle: {
                                color: "rgba(255,255,255,.6)",
                                fontSize: 12
                            }
                        },
                        axisLine: {
                            lineStyle: {
                                color: "rgba(255,255,255,.2)"
                            }
                        },

                        data: [
                            "01",
                            "02",
                            "03",
                            "04",
                            "05",
                            "06",
                            "07",
                            "08",
                            "09",
                            "11",
                            "12",
                            "13",
                            "14",
                            "15",
                            "16",
                            "17",
                            "18",
                            "19",
                            "20",
                            "21",
                            "22",
                            "23",
                            "24",
                            "25",
                            "26",
                            "27",
                            "28",
                            "29",
                            "30"
                        ]
                    },
                    {
                        axisPointer: { show: false },
                        axisLine: { show: false },
                        position: "bottom",
                        offset: 20
                    }
                ],

                yAxis: [
                    {
                        type: "value",
                        axisTick: { show: false },
                        axisLine: {
                            lineStyle: {
                                color: "rgba(255,255,255,.1)"
                            }
                        },
                        axisLabel: {
                            textStyle: {
                                color: "rgba(255,255,255,.6)",
                                fontSize: 12
                            }
                        },

                        splitLine: {
                            lineStyle: {
                                color: "rgba(255,255,255,.1)"
                            }
                        }
                    }
                ],
                series: [
                    {
                        name: "流入",
                        type: "line",
                        smooth: true,
                        symbol: "circle",
                        symbolSize: 5,
                        showSymbol: false,
                        lineStyle: {
                            normal: {
                                color: "#0184d5",
                                width: 2
                            }
                        },
                        areaStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(
                                    0,
                                    0,
                                    0,
                                    1,
                                    [
                                        {
                                            offset: 0,
                                            color: "rgba(1, 132, 213, 0.4)"
                                        },
                                        {
                                            offset: 0.8,
                                            color: "rgba(1, 132, 213, 0.1)"
                                        }
                                    ],
                                    false
                                ),
                                shadowColor: "rgba(0, 0, 0, 0.1)"
                            }
                        },
                        itemStyle: {
                            normal: {
                                color: "#0184d5",
                                borderColor: "rgba(221, 220, 107, .1)",
                                borderWidth: 12
                            }
                        },
                        data: [
                            30,
                            40,
                            30,
                            40,
                            30,
                            40,
                            30,
                            60,
                            20,
                            40,
                            20,
                            40,
                            30,
                            40,
                            30,
                            40,
                            30,
                            40,
                            30,
                            60,
                            20,
                            40,
                            20,
                            40,
                            30,
                            60,
                            20,
                            40,
                            20,
                            40
                        ]
                    },
                    {
                        name: "流出",
                        type: "line",
                        smooth: true,
                        symbol: "circle",
                        symbolSize: 5,
                        showSymbol: false,
                        lineStyle: {
                            normal: {
                                color: "#00d887",
                                width: 2
                            }
                        },
                        areaStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(
                                    0,
                                    0,
                                    0,
                                    1,
                                    [
                                        {
                                            offset: 0,
                                            color: "rgba(0, 216, 135, 0.4)"
                                        },
                                        {
                                            offset: 0.8,
                                            color: "rgba(0, 216, 135, 0.1)"
                                        }
                                    ],
                                    false
                                ),
                                shadowColor: "rgba(0, 0, 0, 0.1)"
                            }
                        },
                        itemStyle: {
                            normal: {
                                color: "#00d887",
                                borderColor: "rgba(221, 220, 107, .1)",
                                borderWidth: 12
                            }
                        },
                        data: [
                            50,
                            30,
                            50,
                            60,
                            10,
                            50,
                            30,
                            50,
                            60,
                            40,
                            60,
                            40,
                            80,
                            30,
                            50,
                            60,
                            10,
                            50,
                            30,
                            70,
                            20,
                            50,
                            10,
                            40,
                            50,
                            30,
                            70,
                            20,
                            50,
                            10,
                            40
                        ]
                    }
                ]
            };

            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option5);
            window.addEventListener("resize", function () {
                myChart.resize();
            });
        },
        init6() {
            // 点位分布统计模块
            var myChart = echarts.init(document.querySelector(".pie1  .chart"));
            // 2. 指定配置项和数据
            var option6 = {
                legend: {
                    top: "90%",
                    itemWidth: 10,
                    itemHeight: 10,
                    textStyle: {
                        color: "rgba(255,255,255,.5)",
                        fontSize: "12"
                    }
                },
                tooltip: {
                    trigger: "item",
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                // 注意颜色写的位置
                color: [
                    "#006cff",
                    "#60cda0",
                    "#ed8884",
                    "#ff9f7f",
                    "#0096ff",
                    "#9fe6b8",
                    "#32c5e9",
                    "#1d9dff"
                ],
                series: [
                    {
                        name: "点位统计",
                        type: "pie",
                        // 如果radius是百分比则必须加引号
                        radius: ["10%", "70%"],
                        center: ["50%", "42%"],
                        roseType: "radius",
                        data: [
                            { value: 20, name: "西安" },
                            { value: 26, name: "北京" },
                            { value: 24, name: "上海" },
                            { value: 25, name: "其他" },
                            { value: 20, name: "武汉" },
                            { value: 25, name: "杭州" },
                            { value: 30, name: "深圳" },
                            { value: 42, name: "广州" }
                        ],
                        // 修饰饼形图文字相关的样式 label对象
                        label: {
                            fontSize: 10
                        },
                        // 修饰引导线样式
                        labelLine: {
                            // 连接到图形的线长度
                            length: 10,
                            // 连接到文字的线长度
                            length2: 10
                        }
                    }
                ]
            };

            // 3. 配置项和数据给我们的实例化对象
            myChart.setOption(option6);
            // 4. 当我们浏览器缩放的时候，图表也等比例缩放
            window.addEventListener("resize", function () {
                // 让我们的图表调用 resize这个方法
                myChart.resize();
            });
        }
    },



}
</script>
<!-- <script src="../../../assets/js/echarts_04/flexible.js"></script>
  <script src="../../../assets/js/echarts_04/index.js"></script>
  <script src="../../../assets/js/echarts_04/china.js"></script>
  <script src="../../../assets/js/echarts_04/myMap.js"></script> -->
<style>
@import "../../../assets/css/echarts_04/index.css";
</style>